﻿<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Spa Land - Body & Massage Therapy HTML Template | Gallery Detail</title>

    <!-- Stylesheets -->
    <link href="/css/bootstrap.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">
    <link href="/css/responsive.css" rel="stylesheet">

    <!--Color Switcher Mockup-->
    <link href="/css/color-switcher-design.css" rel="stylesheet">

    <!--Color Themes-->
    <link id="theme-color-file" href="/css/color-themes/default-theme.css" rel="stylesheet">

    <!--Favicon-->
    <link rel="shortcut icon" href="/images/favicon.png" type="image/x-icon">
    <link rel="icon" href="/images/favicon.png" type="image/x-icon">

    <!-- Responsive -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <!--[if lt IE 9]>
    <script src="/https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]-->
    <!--[if lt IE 9]>
    <script src="/js/respond.js"></script><![endif]-->
</head>

<body>
<div class="page-wrapper">

    <!-- Preloader -->
    <div class="preloader"></div>

    <!-- Main Header-->
    <header class="main-header header-style-three">

        <!--Header Top-->
        <div th:insert="~{header :: #header-top}"></div>
        <!-- End Header Top -->

        <!-- Header Lower -->
        <div class="header-lower">
            <div class="auto-container">
                <div th:insert="~{header :: #main-box}"></div>
            </div>
        </div>
        <!-- End Header Lower -->

        <!--Sticky Header-->
        <div th:insert="~{header :: #header-sticky}"></div>
        <!--End Sticky Header-->
    </header>
    <!--End Main Header -->

    <!--Page Title-->
    <section class="page-title" style="background-image:url(/images/background/11.jpg);">
        <div class="auto-container">
            <div class="inner-container clearfix">
                <h1>服务详情</h1>
                <ul class="bread-crumb clearfix">
                    <li><a href="/page/index">首页</a></li>
                    <li>服务详情</li>
                </ul>
            </div>
        </div>
    </section>
    <!--End Page Title-->

    <!-- Gallery Detail -->
    <section class="gallery-detail-section">
        <div class="auto-container">
            <div class="inner-container">
                <div class="gallery-detail">
                    <div class="single-item-carousel owl-carousel owl-theme">
                        <div class="imaeg-box">
                            <a href="/images/gallery/image-1.jpg" class="lightbox-image" data-fancybox="Gallery"><img
                                 style="width: 970px; height: 500px;"th:src="'http://47.94.10.67/images/' + ${gallery.imgUrl}" alt=""></a>
                        </div>

                    </div>
                    <div class="lower-content">
                        <div class="row clearfix">
                            <div class="content-column col-md-7 col-sm-12 col-xs-12">
                                <h3>服务功效</h3>
                                <p th:text="${gallery.zuoyong}"></p>
                            </div>

                            <div class="info-column col-md-5 col-sm-12 col-xs-12">
                                <div class="inner-column">
                                    <h3>服务详情</h3>
                                    <ul class="info-list">
                                        <li><i class="icon fa fa-user-o"></i> 适宜人群 <span th:text="${gallery.suitPeople}"></span>
                                        </li>
                                        <li><i class="icon fa fa-folder-open-o"></i> 疗程 <span th:text="${gallery.liaocheng}"></span>
                                        </li>
                                        <li><i class="icon fa fa-calendar"></i> 营业时间 <span th:text="${gallery.openDate}"></span>
                                        </li>
                                        <li><i class="icon fa fa-calendar"></i> 项目开始时间 <span th:text="${gallery.startDate}"></span>
                                        </li>
                                        <li><i class="icon fa fa-dollar"></i> 单价 <span th:text="${gallery.pirce} + '元'"></span></li>
                                        <li><i class="icon fa fa-paper-plane-o"></i>地址 <span th:text="${gallery.address}"></span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="project-description">
                            <h3>服务描述</h3>
                            <p th:text="${gallery.galleryDesc}"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Gallery Detail -->

    <!-- Main Footer -->
    <div th:insert="~{footer :: #footer}"></div>
    <!-- End Main Footer -->

</div>
<!--End pagewrapper-->
<div class="color-palate">
    <div class="color-trigger">
        <i class="fa fa-gear"></i>
    </div>
    <div class="color-palate-head">
        <h6>选择一个你喜欢的主题</h6>
    </div>
    <div class="various-color clearfix">
        <div class="colors-list">
            <span class="palate default-color active" data-theme-file="/css/color-themes/default-theme.css"></span>
            <span class="palate teal-color" data-theme-file="/css/color-themes/teal-theme.css"></span>
            <span class="palate navy-color" data-theme-file="/css/color-themes/navy-theme.css"></span>
            <span class="palate yellow-color" data-theme-file="/css/color-themes/yellow-theme.css"></span>
            <span class="palate blue-color" data-theme-file="/css/color-themes/blue-theme.css"></span>
            <span class="palate purple-color" data-theme-file="/css/color-themes/purple-theme.css"></span>
            <span class="palate olive-color" data-theme-file="/css/color-themes/olive-theme.css"></span>
            <span class="palate red-color" data-theme-file="/css/color-themes/red-theme.css"></span>
        </div>
    </div>

    <div class="palate-foo">
        <span>你可以很简单的改变主体颜色</span>
    </div>

</div>
<!-- /.End Of Color Palate -->

<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.min.js"></script>
<!--End Revolution Slider-->
<script src="/js/jquery-ui.js"></script>
<script src="/js/jquery.fancybox.js"></script>
<script src="/js/owl.js"></script>
<script src="/js/appear.js"></script>
<script src="/js/wow.js"></script>
<script src="/js/mixitup.js"></script>
<script src="/js/script.js"></script>
<!--Color Switcher-->
<script src="/js/color-settings.js"></script>
</body>
</html>
<script type="text/javascript">
    function searchService() {
        var question = $("#q").val().trim();
        window.location.href = '/gallery/searchGallery?question=' + question;
    }
</script>